<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="icon" href="https://www.bilibili.com/favicon.ico">
    <style>
        #root {
            width: 500px;
            margin: 200px auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="root">
        <input type="text" placeholder="search" v-model='keyword'>
        <ul>
            <li v-for='gua,index in cache' :key="gua.id">{{gua.name}}--{{gua.price}}--{{gua.id}}</li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data: {
                keyword: '',
                guas: [{
                    name: '金瓜粒子',
                    price: '两块钱一斤',
                    id: '001'
                }, {
                    name: '金瓜皮',
                    price: '10块钱一斤',
                    id: '002'
                }, {
                    name: '银瓜皮',
                    price: '5块钱一斤',
                    id: '003'
                }, {
                    name: '铁瓜皮',
                    price: '1块钱一斤',
                    id: '004'
                }, ],
                // cache: []
            },
            computed: {
                // 计算属性，计算出需要的数据
                cache() {
                    return this.guas.filter((r) => {
                        return r.name.indexOf(this.keyword) !== -1
                    })
                }
            },
            watch: {
                // 这种方式会造成页面初始为空白，需要加上immediate: true,
                // keyword(val) {
                //     this.cache = this.guas.filter((r) => {
                //         return r.name.indexOf(val) !== -1
                //     })
                // },


                //立即进行一次监视，不会造成初始空白
                // keyword: {
                //     immediate: true,
                //     handler(val) {
                //         this.cache = this.guas.filter((r) => {
                //             return r.name.indexOf(val) != -1
                //         })
                //     }
                // }
            },
            methods: {},
        })
    </script>
</body>

</html>